@use 'sass:color';

.pinned-recording-card {
  &.currently-pinned {
    background-color: $blue !important;
    color: white;

    a {
      color: inherit;
    }

    &.current-listen {
      background-color: color.scale($blue, $lightness: 20%) !important;
      .listen-controls .fa-ellipsis-vertical {
        stroke: color.scale($blue, $lightness: 20%);
      }
    }

    .text-muted {
      color: rgb(204, 204, 204) !important;
    }
    .listen-controls {
      .dropdown-menu {
        color: initial;
      }
      .fa-ellipsis-vertical {
        stroke: $blue;
        &:hover {
          color: $white;
        }
      }
      .hate {
        &:hover {
          stroke: $white;
        }

        &.hated {
          color: $white;
        }
      }
    }
    .additional-content {
      border-color: color.scale($blue, $lightness: 35%);
    }
    .listen-time {
      color: color.adjust($white, $lightness: -10%);
    }
    .play-button {
      color: color.adjust($white, $lightness: -10%);
    }
  }

  .main-content > .pinned-recording-icon {
    flex: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1em;
    justify-content: center;
    .icon {
      font-size: 1.6em;
    }
  }
}
